<template>
    <div>
        <span>更新于：{{ updateTime }}</span>
        <el-row>

            <el-col :span="12">
                <div id="temp" style="width: 600px; height: 400px"></div>
            </el-col>

            <el-col :span="12">
                <div id="humi" style="width: 600px; height: 400px"></div>
            </el-col>

        </el-row>

        <el-row>
            <el-col :span="12">
                <div id="main1" style="width: 600px; height: 400px"></div>
            </el-col>
            <el-col :span="12">
                <div id="main2" style="width: 600px; height: 400px"></div>
            </el-col>
        </el-row>
    </div>

</template>


<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    import * as echarts from 'echarts'
    import {getData,saveData,getDBData} from "../../api/monitor/dht11.js"

    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {},
        props: {},
        data() {
            //这里存放数据
            return {
                updateTime: "",
                wendu: "0",
                shidu: "0",
                maxWendu: -100,
                maxShidu: -100,
                dht11Data: {
                    //需要修改的地方
                    uid: "97ef1241c0d61c5cebfd3b802511fe57",//用户密钥，巴法云控制台获取
                    zigbeetopic: "DHT11",//传输温湿度的主题，创客云控制台创建
                    device_status: "离线",// 显示led是否在线的字符串，默认离线
                    dataTime: "", //记录数据上传的时间
                    client: null,//mqtt客户端，默认为空
                },
            };
        },
        created() {
            this.getDHT11Date()
        },
        mounted() {
            setInterval(() => {
                this.getDHT11Date()
                myChart1.setOption({
                    series: [
                        {
                            data: [
                                {
                                    value: this.maxWendu
                                }
                            ]
                        },
                        {
                            data: [
                                {
                                    value: this.wendu
                                }
                            ]
                        }
                    ]
                });
                myChart2.setOption({
                    series: [
                        {
                            data: [
                                {
                                    value: this.maxShidu
                                }
                            ]
                        },
                        {
                            data: [
                                {
                                    value: this.shidu
                                }
                            ]
                        }
                    ]
                });
                getDBData().then(res=>{
                    option3.series[0].data = res.data.temp
                    option4.series[0].data = res.data.humi
                    option3.xAxis.data = res.data.createTime
                    option4.xAxis.data = res.data.createTime
                    myChart3.setOption(option3)
                    myChart4.setOption(option4)
                    console.log("temp:"+res.data.temp)
                    console.log("humi:"+res.data.humi)
                    console.log("createTime:"+res.data.createTime)
                })
            }, 3000);

            setInterval(() => {
                this.saveDataToDB()

            }, 20000);
            var option1= {
                series: [
                    {
                        type: 'gauge',
                        center: ['50%', '60%'],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: 60,
                        splitNumber: 12,
                        itemStyle: {
                            color: '#FFAB91'
                        },
                        progress: {
                            show: true,
                            width: 30
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                width: 30
                            }
                        },
                        axisTick: {
                            distance: -45,
                            splitNumber: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        splitLine: {
                            distance: -52,
                            length: 14,
                            lineStyle: {
                                width: 3,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: -20,
                            color: '#999',
                            fontSize: 20
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 40,
                            borderRadius: 8,
                            offsetCenter: [0, '-15%'],
                            fontSize: 45,
                            fontWeight: 'bolder',
                            formatter: '{value} °C',
                            color: 'inherit'
                        },
                        data: [
                            {
                                value: 20
                            }
                        ]
                    },
                    {
                        type: 'gauge',
                        center: ['50%', '60%'],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: 60,
                        itemStyle: {
                            color: '#FD7347'
                        },
                        progress: {
                            show: true,
                            width: 8
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        data: [
                            {
                                value: 20
                            }
                        ]
                    }
                ]
            };
            var option2 = {
                series: [
                    {
                        type: 'gauge',
                        center: ['50%', '60%'],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: 120,
                        splitNumber: 12,
                        itemStyle: {
                            color: '#87DFE4'
                        },
                        progress: {
                            show: true,
                            width: 30
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                width: 30
                            }
                        },
                        axisTick: {
                            distance: -45,
                            splitNumber: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        splitLine: {
                            distance: -52,
                            length: 14,
                            lineStyle: {
                                width: 3,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: -20,
                            color: '#999',
                            fontSize: 20
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 40,
                            borderRadius: 8,
                            offsetCenter: [0, '-15%'],
                            fontSize: 45,
                            fontWeight: 'bolder',
                            formatter: '{value} %',
                            color: 'inherit'
                        },
                        data: [
                            {
                                value: 20
                            }
                        ]
                    },
                    {
                        type: 'gauge',
                        center: ['50%', '60%'],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: 120,
                        itemStyle: {
                            color: '#48ADC9'
                        },
                        progress: {
                            show: true,
                            width: 8
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        data: [
                            {
                                value: 20
                            }
                        ]
                    }
                ]
            };
            var option3 = {
                title: {
                    text: '温度'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: 'Highest',
                        type: 'line',
                        data: [10, 11, 13, 11, 12, 12, 9],
                        markPoint: {
                            data: [
                                {type: 'max', name: 'Max'},
                                {type: 'min', name: 'Min'}
                            ]
                        },
                        markLine: {
                            data: [{type: 'average', name: 'Avg'}]
                        },
                        itemStyle:{
                            normal:{
                                color:'#FD7347',
                                lineStyle:{
                                    color:'#FD7347'
                                }
                            }
                        }
                    },
                ]
            };
            var option4 = {
                title: {
                    text: '湿度'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,

                    data: []
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} %'
                    }
                },
                series: [
                    {
                        name: 'Highest',
                        type: 'line',
                        data: [10, 11, 13, 60, 12, 12, 9],
                        markPoint: {
                            data: [
                                {type: 'max', name: 'Max'},
                                {type: 'min', name: 'Min'}
                            ]
                        },
                        markLine: {
                            data: [{type: 'average', name: 'Avg'}]
                        },
                        itemStyle:{
                            normal:{
                                color:'#87DFE4',
                                lineStyle:{
                                    color:'#87DFE4'
                                }
                            }
                        }
                    },
                ]
            };
            var temp = document.getElementById('temp');
            var humi = document.getElementById('humi');
            var main1 = document.getElementById('main1');
            var main2 = document.getElementById('main2');
            // var tempExcel = document.getElementById('tempExcel');
            var myChart1 = echarts.init(temp);
            var myChart2 = echarts.init(humi);
            var myChart3 = echarts.init(main1);
            var myChart4 = echarts.init(main2);
            //var myChart3 = echarts.init(humi);

            // 数据准备完毕之后再set
            myChart1.setOption(option1);
            myChart2.setOption(option2);
            myChart3.setOption(option3);
            myChart4.setOption(option4);
        },
        methods: {
            getDHT11Date() {
                getData(this.dht11Data).then(res => {
                    let data_arr = res.data.msg.split("#")
                    this.updateTime = res.data.time
                    this.wendu = data_arr[1]
                    this.shidu = data_arr[2]
                    this.maxWendu = this.maxWendu > this.wendu ? this.maxWendu : this.wendu
                    this.maxShidu = this.maxShidu > this.shidu ? this.maxShidu : this.shidu
                })
            },
            saveDataToDB(){
                console.log(this.wendu)
                if(isNaN(this.wendu) || isNaN(this.shidu))
                    return
                if(this.wendu===undefined || this.wendu==="" || this.shidu===undefined || this.shidu==="")
                    return;
                saveData({
                    "temp": this.wendu,
                    "humi": this.shidu,
                })
            },
            getDBData(){

            }
        }
    };
</script>
<style scoped>

</style>
